<template>
  <div class="confirm" v-show="isShow">
    <div class="mask" @click="isShow = false"></div>
    <div class="window">
      <p class="msg">{{ msg }}</p>
      <div class="btns flex">
        <div class="btn" @click="$emit('sure')">确定</div>
        <div class="btn" @click="isShow = false">取消</div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: ["msg"],
  data() {
    return {
        isShow: false,
    };
  },
  methods:{
      hide(){
          this.isShow = false
      },
      show(){
          this.isShow = true
      }
  }
};
</script>
 
<style lang = "less" scoped>
.confirm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    .mask {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .window {
        position: absolute;
        top: 150px;
        left: 50%;
        transform: translate(-50%);
        width: 300px;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 10px;
        .msg {
            text-align: center;
            padding: 20px 0;
        }
        .btns {
            justify-content: space-around;
            .btn {
                width: 40%;
                height: 30px;
                background-color: #4488ff;
                color: #fff;
                text-align: center;
                line-height: 30px;
                font-size: 18px;
                cursor: pointer;
                border-radius: 4px;
            }
        }
    }
}
</style>